<!DOCTYPE html>
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3立体相册突出效果</title>
<link rel="stylesheet" href="css/reset.css" media="screen" />
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="stylesheet" href="css/css3_3d.css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script>
if (!Modernizr.csstransforms) {
	$(document).ready(function(){
		$(".close").text("Back to top");
	});
}
</script>
</head>
<body>
	<div id="container">
       	<h2 class="title"><span>css3立体相册突出效果</span></h2> 
        <ul id="grid" class="group">
            <li>
                <div class="details">
                	<h3>Lanterns</h3>
                    <a class="more" href="#info1">view details</a> 
                </div>
               <a class="more" href="#info1"><img src="images/lanterns.jpg" /></a>
            </li>
            <li>
                <div class="details">
	                <h3>Tree</h3>
                    <a class="more" href="#info2">view details</a>
    			</div>
                <a href="#info2"><img src="images/tree.jpg" /></a>
            </li>
            <li class="end">
                <div class="details">
	                <h3>Cable Car</h3>
                    <a class="more" href="#info3">view details</a>
    			</div>
                <a href="#info3"><img src="images/cablecar.jpg" /></a>
            </li>
            <li>
                <div class="details">
	                <h3>London Eye</h3>
                    <a class="more" href="#info4">view details</a>
    			</div>
                <a href="#info4"><img src="images/londoneye.jpg" /></a>
            </li>
            <li>
                <div class="details">
	                <h3>Golden Statue</h3>
                    <a class="more" href="#info5">view details</a>
    			</div>
                <a href="#info5"><img src="images/statue.jpg" /></a>
            </li>
            <li class="end">
                 <div class="details">
	                <h3>Under the Bridge</h3>
                    <a class="more" href="#info6">view details</a>
    			</div>
                <a href="#info6"><img src="images/bridge.jpg" /></a>
            </li>
            <li>
                 <div class="details">
	                <h3>Pregnant Maiden</h3>
                    <a class="more" href="#info7">view details</a>
    			</div>
                <a href="#info7"><img src="images/maiden.jpg" /></a>
            </li>
            <li>
                 <div class="details">
	                <h3>Clouds of Doom</h3>
                    <a class="more" href="#info8">view details</a>
    			</div>
                <a href="#info8"><img src="images/clouds.jpg" /></a>
            </li>
            <li class="end">
                 <div class="details">
	                <h3>Silver Statue</h3>
                    <a class="more" href="#info9">view details</a>
    			</div>
                <a href="#info9"><img src="images/statue2.jpg" /></a>
            </li>
        </ul>
    </div>
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Opera、傲游、搜狗. 不支持IE8、360、Safari、世界之窗。</p>
<p>来源：<a href="http://www.php.cn/" target="_blank">PHP中文网</a></p>
</div>
</body>
</html>